<!DOCTYPE html>

<html>
	<title> OTA包管理 </title>
	<head>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="{{ static_url('css/bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ static_url('css/pop.css') }}">

        <script src="{{ static_url('js/utils.js') }}"></script>
        <script src="{{ static_url('js/pop.js') }}"></script>
        <script src="{{ static_url('js/jquery.min.js') }}"></script>
        <script src="{{ static_url('js/bootstrap.min.js') }}"></script>

		<style type="text/css">
            th {
                text-align:     center;
            }
		</style>

	</head>


    <body>
        <div class="container">
            <h2> OTA包管理 </h2>
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#test_table"> 测试OTA包列表 </a></li>
                <li><a data-toggle="tab" href="#online_table"> 正式OTA包列表 </a></li>
                <li><a data-toggle="tab" href="#sn_ids"> 测试白名单 </a></li>
            </ul>

            <div class="tab-content">

                <!-- test scope -->
                <div id="test_table" class="tab-pane fade in active">
                    </br>
                    <table class="table table-striped table-bordered table-hover table-condensed" id="test">
                        <thead> </thead>
                        <tbody> </tbody>
                    </table>

                    <div align="center">
                        <button type="button" class="btn btn-success" id="change_2_online"> 转为正式 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="change_status_2_1_test"> 激活 </button>
                        <button type="button" class="btn btn-success" id="change_status_2_0_test"> 取消激活 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="set_device_scope_0_test"> 不限设备 </button>
                        <button type="button" class="btn btn-success" id="set_device_scope_1_test"> 仅白名单设备 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="delete_test"> 删除 </button>
                    </div>

                </div>

                <!-- online scope -->
                <div id="online_table" class="tab-pane fade">
                    </br>
                    <table class="table table-striped table-bordered table-hover table-condensed" id="online">
                        <thead> </thead>
                        <tbody> </tbody>
                    </table>

                    <div align="center">
                        <button type="button" class="btn btn-success" id="change_2_test"> 转为测试 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="change_status_2_1_online"> 激活 </button>
                        <button type="button" class="btn btn-success" id="change_status_2_0_online"> 取消激活 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="set_device_scope_0_online"> 不限设备 </button>
                        <button type="button" class="btn btn-success" id="set_device_scope_1_online"> 仅白名单设备 </button>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        <button type="button" class="btn btn-success" id="delete_online"> 删除 </button>
                    </div>

                </div>

                <div id="sn_ids" class="tab-pane fade">
                    <br><br>
                    <span id="sn_ids_tips"></span>
                    <span id="sn_ids_str"></span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-success" id="edit_sn_ids"> 修改 </button>
                    <button type="button" class="btn btn-success" id="edit_save"> 保存 </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-success" id="edit_cancel"> 取消 </button>
                </div>

            </div>
        </div>

    <script>
        $(document).ready(function() {
            $('[data-toggle="popover"]').popover();
        })
    </script>

    </body>

</html>


<script type="text/javascript">

    // 打开页面自动加载
    $(function () {
        fuckResultColTitle();
        updateAll();

        $("button#edit_save").hide();
        $("button#edit_cancel").hide();
    });

    // 更新
    function updateAll() {
        $.get(getLocalHost() + "/manage/get_all",
            function(msg, status, xhr) {
                console.log("msg: " + JSON.stringify(msg));

                var test_result_str = fuckFormatResults(msg.test_results);
                $("#test tbody").html(test_result_str);

                var online_result_str = fuckFormatResults(msg.online_results);
                $("#online tbody").html(online_result_str);

                $("#sn_ids_str").html(msg.sn_ids);
		});
    }

    // table行标题
    function fuckResultColTitle() {
        var col_title_str = '<tr>\
            <th> 选择 </th>\
            <th> 上一个版本 </th>\
            <th> 更新到版本 </th>\
            <th> 支持设备 </th>\
            <th> 域 </th>\
            <th> 设备范围 </th>\
            <th> 状态 </th>\
            <th> 更新说明 </th>\
            <th> 成功/次 </th>\
            <th> 失败/次 </th>\
            <th> 编辑 </th>\
            </tr>'

        $("#test thead").html(col_title_str);
        $("#online thead").html(col_title_str);
    }

    // 将结果整理成html格式
    function fuckFormatResults(results) {
        var template = '<tr>\
            <td align="center" width="50" > <input id="_id" value="{0}" type="checkbox" /> </td>\
            <td align="center" width="100" > {1} </td>\
            <td align="center" width="100" > {2} </td>\
            <td align="center" width="150" > {3} </td>\
            <td align="center" width="100" > {4} </td>\
            <td align="center" width="150" > {5} </td>\
            <td align="center" width="100" > {6} </td>\
            <td align="center" width="150" > <a href="#" title="{7}" data-toggle="popover" data-trigger="hover" data-content="{7}"> {8} </a> </td>\
            <td align="center" width="100" > {9} </td>\
            <td align="center" width="100" > {10} </td>\
            <td align="center" width="150" > <a href="/manage/edit?_id={11}" > 编辑 </a> </td>\
            </tr>';

        var ret_str = String("");
        for(var sn_id_str in results) {
            var datas_list = results[sn_id_str];

            for(var i = 0; i < datas_list.length; i ++) {
                var datas = datas_list[i];
                console.log("datas: " + JSON.stringify(datas));

                if (datas.scope == "test") {
                    var scope = "测试";
                } else {
                    var scope = "正式";
                }

                if (datas.device_scope == "1") {
                    var device_scope = "测试白名单";
                } else {
                    var device_scope = "不限";
                }

                if (datas.status == "1") {
                    var status = "激活";
                } else {
                    var status = "未激活";
                }

                var test_result_str = template.format(datas._id, datas.ver_from, datas.ver, sn_id_str, scope,
                    device_scope, status, datas.info, datas.info.slice(0, 5) + '...', datas.update_success, datas.update_failed, datas._id);
                console.log("test_result_str: " + test_result_str);
                ret_str += test_result_str;
            }
        }
        return ret_str;
    }

	// 转为正式
	$("button#change_2_online").click(function() {
	    showPopWindow("确定要将选中设备转换到正式环境？", function (){
	        changeScope("online");
	    })
	})

	// 转为测试
	$("button#change_2_test").click(function() {
	    showPopWindow("确定要将选中设备转换到测试环境？", function (){
	        changeScope("test");
	    })
	})

	// 切换状态为激活 status=1
	$("button#change_status_2_1_test").click(function() {
	    showPopWindow("确定激活？", function (){
	        changeStatus("test", "1");
	    })
	})
	$("button#change_status_2_1_online").click(function() {
	    showPopWindow("确定激活？", function (){
	        changeStatus("online", "1");
	    })
	})

	// 切换状态为非激活 status=0
	$("button#change_status_2_0_test").click(function() {
	    showPopWindow("确定要将选中设备取消激活？", function (){
	        changeStatus("test", '0');
	    })
	})
	$("button#change_status_2_0_online").click(function() {
	    showPopWindow("确定要将选中设备取消激活？", function (){
	        changeStatus("online", '0');
	    })
	})

	// 删除
	$("button#delete_test").click(function() {
        deleteItems("test");
	})
	$("button#delete_online").click(function() {
        deleteItems("online");
	})

	// 设置更新包的设备使用域
	$("button#set_device_scope_0_test").click(function() {
        setDeviceScope("test", "0");
	})
	$("button#set_device_scope_1_test").click(function() {
        setDeviceScope("test", "1");
	})
	$("button#set_device_scope_0_online").click(function() {
        setDeviceScope("online", "0");
	})
	$("button#set_device_scope_1_online").click(function() {
        setDeviceScope("online", "1");
	})

	// 切换域 scope
	function changeScope(scope) {
		// 找到_id
		if (scope == "online") {
		    var scp_field = "#test :checkbox:checked";
		} else {
		    var scp_field = "#online :checkbox:checked";
		}

		$(scp_field).each(function() {
			var _id = $(this).val();
			var log_str = "scope: " + scope + ", _id: " + _id;
			console.log(log_str);

			var params = {
				_id: 		_id,
				scope: 		scope
			}
			$.post(getLocalHost() + "/manage/scope", params,
				function(msg, status, xhr) {
					console.log("msg: " + JSON.stringify(msg));
					if (msg.code == 0){
						showPopWindow("操作成功!");
					} else {
					    showPopWindow("操作失败!");
					}
			});
		});

        updateAll();
	}

	// 切换激活状态 status
	function changeStatus(scope, status) {
		// 找到_id
		if (scope == "test") {
		    var scp_field = "#test :checkbox:checked";
		} else {
		    var scp_field = "#online :checkbox:checked";
		}
		console.log("scope: " + scope);

		$(scp_field).each(function() {
			var _id = $(this).val();
			var log_str = "_id: " + _id;
			console.log(log_str);

			var params = {
				_id: 		_id,
				status: 	status
			}
			$.post(getLocalHost() + "/manage/status", params,
				function(msg, status, xhr) {
					console.log("msg: " + JSON.stringify(msg));
					if (msg.code == 0){
						showPopWindow("操作成功!");
					} else {
						showPopWindow("操作失败!");
					}
			});
		});

        updateAll();
	}

	// 删除选中条目
	function deleteItems(scope) {
        showPopWindow("确定要删除所有选中的设备更新包?", function () {
            doDelete(scope)
        })
	}
	function doDelete(scope) {
	    if (scope == "test") {
		    var scp_field = "#test :checkbox:checked";
		} else {
		    var scp_field = "#online :checkbox:checked";
		}

		$(scp_field).each(function() {
			var _id = $(this).val();
			console.log("_id: " + _id);

			var params = {
				_id: 		_id
			}
			$.post(getLocalHost() + "/manage/delete", params,
				function(msg, status, xhr) {
					console.log("msg: " + JSON.stringify(msg));
					if (msg.code == 0){
					    showPopWindow("删除成功!");
					} else {
					    showPopWindow("删除失败!");
					}
			});
		});

        updateAll();
	}

	// 设置设备范围
	function setDeviceScope(scope, device_scope) {
	    if (scope == "test") {
		    var scp_field = "#test :checkbox:checked";
		} else {
		    var scp_field = "#online :checkbox:checked";
		}

		$(scp_field).each(function() {
			var _id = $(this).val();
			console.log("_id: " + _id);

			var params = {
				_id: 		    _id,
				device_scope:   device_scope
			}
			$.post(getLocalHost() + "/manage/device_scope", params,
				function(msg, status, xhr) {
					console.log("msg: " + JSON.stringify(msg));
					if (msg.code == 0){
					    showPopWindow("设置成功!");
					} else {
					    showPopWindow("设置失败!");
					}
			});
		});

        updateAll();
	}

	// 点击修改sn_ids
	$("button#edit_sn_ids").click(function() {

        var sn_ids_str = $("#sn_ids_str").text();
        console.log("sn_ids_str: " + sn_ids_str);

        var tips = "请将 SN_ID 使用分号隔开";
        var new_area = '<br><br>\
            <textarea class="form-control" rows="5" id="comment">{0}</textarea>\
            <br></br>';

        $("#sn_ids_tips").html(tips);
        $("#sn_ids_str").html(new_area.format(sn_ids_str));

        $("#sn_ids_tips").show()
        $("button#edit_sn_ids").hide();
        $("button#edit_save").show();
        $("button#edit_cancel").show();
	})

	// 点击保存SN_IDS
	$("button#edit_save").click(function() {

	    var sn_ids_str = $("#comment").val();
	    console.log("sn_ids_str: " + sn_ids_str);

	    $.post(getLocalHost() + "/manage/sn_id", {sn_ids: sn_ids_str},
            function(msg, status, xhr) {
                console.log("msg: " + JSON.stringify(msg));

                $("#sn_ids_tips").hide()
                $("#sn_ids_str").html(sn_ids_str);
                $("button#edit_sn_ids").show();
                $("button#edit_save").hide();
                $("button#edit_cancel").hide();
		});
	})

    // 点击取消
	$("button#edit_cancel").click(function() {
	    console.log("fuck cancel");

	    var sn_ids_str = $("#comment").text();
	    $("#sn_ids_str").html(sn_ids_str);

        $("#sn_ids_tips").hide()
	    $("button#edit_sn_ids").show();
        $("button#edit_save").hide();
        $("button#edit_cancel").hide();
	})


</script>
